<template>
	<scroll-view
		class="scroll"
		scroll-y="true"
		:style="{
			height: windowHeight + 'px',
			borderBottom: scrollProps.defaultBorder,
			boxSizing: 'border-box',
		}"
		:refresherEnabled="scrollProps.refresherEnabled"
		:refresherTriggered="scrollProps.refresherTriggered"
		@refresherrefresh="$emit('refresherrefresh', $event)"
		@scrolltolower="$emit('scrolltolower', $event)"
	>
		<view class="scroll-page-content">
			<slot></slot>
		</view>
	</scroll-view>
</template>

<script setup>
	const $emit = defineEmits(['refresherrefresh', 'scrolltolower'])
	const { windowHeight } = uni.getSystemInfoSync()
	const scrollProps = defineProps({
		defaultBorder: {
			type: [String, Boolean],
			default: false,
		},
		refresherEnabled: {
			type: Boolean,
			default: false,
		},
		refresherTriggered: {
			type: Boolean,
			default: false,
		},
	})
</script>

<style lang="scss">
	.scroll {
		background-color: #f6f7f9;
	}
	.scroll-page-content {
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
